<script>
import ChangePasswordDialog from "/src/components/common/ChangePasswordDialog.vue";

export default {
  components: {
    ChangePasswordDialog
  },
  data() {
    return {
      userSelf: {
        username: '',
        realName: '',
        fileIdOfAvatar: '',
        mobile: '',
      },
      isMenuOpen: true
    }
  },
  created() {
    this.getSelf();
    this.$kt.event.on("menu:close", () => {
      this.isMenuOpen = false;
    });
    this.$kt.event.on("menu:open", () => {
      this.isMenuOpen = true;
    });
  },
  methods: {
    closeMenu(){
      this.isMenuOpen = false;
      this.$kt.event.emit("menu:close");
    },
    openMenu(){
      this.isMenuOpen = true;
      this.$kt.event.emit("menu:open");
    },
    getSelf() {
      this.$kt.requestSecurity.send({
        uri: "/user-account-web/userAccount/getSelf",
        stateSuccess: (res) => {
          this.userSelf = res.data;
        },
        stateFail: (err) => {
          if (err.stateCode !== "notLogin") {
            this.$message.error(err.errMsg);
          }
        }
      });
    },

    logout() {
      // 是否退出登录
      this.$confirm('是否退出登录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 退出登录
        this.$kt.requestSecurity.send({
          uri: "/user-account-web/userAccountLogin/logout",
          stateSuccess: (res) => {
            this.$kt.requestSecurity.clearKey();
            // 提示退出成功
            this.$notify({
              title: res.msg,
              type: 'success',
              // 停留10秒
              duration: 10000
            });
            setTimeout(() => {
              this.$router.push({path: "/login/body"});
            }, 500);
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
          }
        });
      }).catch(() => {
        // 取消退出登录
      });
    }
  }
}

</script>

<template>
  <div class="box">
    <div class="back">
      <div v-for="item in 100" class="back-logo-box">
        <img class="back-logo" src="/logo.png"/>
      </div>
    </div>


    <div class="box-body">
      <div
          class="close-and-open"
          v-if="isMenuOpen"
          @click="closeMenu()">
        <img
            class="arrow"
            src="/left.svg" />
      </div>
      <div
          class="close-and-open"
          v-else
          @click="openMenu()">
        <img
            class="arrow arrow-right"
            src="/left.svg" />
      </div>
      <div style="float: right;;display: inline-block">
        <div class="box-body-item box-body-item-real-name">
          <span class="nickname">{{ userSelf.realName }}</span>
        </div>

        <div class="box-body-item">

          <el-popover
              class="popover"
              placement="top-start"
              :width="200"
              trigger="hover"
          >
            <template #reference>
              <div style="position: relative">
                <el-avatar
                    class="pop"
                    v-if="!userSelf.fileIdOfAvatar"
                    style="width: 30px;height: 30px"
                    v-text="userSelf.realName"></el-avatar>
                <el-avatar
                    class="pop"
                    v-if="userSelf.fileIdOfAvatar"
                    style="width: 30px;height: 30px;"
                    :src="$kt.file.visit(userSelf.fileIdOfAvatar)"
                />

                <div class="popover"
                     style="position: absolute;left: 0;top:0;width:100%;height:100%;z-index:999"
                ></div>
              </div>
            </template>
            <div>
              <div>
                <div class="pop-box">
                  <span class="pop-title">账号</span>
                  <span class="pop-text">{{ userSelf.username }}</span>
                </div>
              </div>
              <div>
                <div class="pop-box">
                  <span class="pop-title">姓名</span>
                  <span class="pop-text">{{ userSelf.realName }}</span>
                </div>
              </div>
              <div>
                <div class="pop-box">
                  <span class="pop-title">手机号</span>
                  <span class="pop-text">{{ userSelf.mobile }}</span>
                </div>
              </div>

              <el-divider></el-divider>


              <div>
                <el-button class="change-btn"
                           @click="$refs.changePasswordDialog.open()"
                >修改密码
                </el-button>
              </div>
              <div style="height: 5px"></div>
              <div>
                <el-button
                    @click="logout"
                    class="logout-btn">退出登录
                </el-button>
              </div>
            </div>

          </el-popover>

        </div>
      </div>

    </div>
  </div>

  <change-password-dialog
      ref="changePasswordDialog"
  ></change-password-dialog>
</template>

<style lang="scss" scoped>
.box {
  position: relative;
  height: 50px;
  //background-color: rgba(24, 150, 146, .8);
  background-color: rgba(0, 0, 0, .7);
  width: calc(100% - 40px);
  margin: 20px;
  border-radius: 10px;

}


.back {
  position: absolute;
  //background-color: rgb(24, 150, 146, .6);
  width: 100%;
  height: 100%;
  // 超出部分隐藏
  overflow: hidden;
}

.back-logo-box {
  position: relative;
  width: 30px;
  height: 30px;
  display: inline-block;
  opacity: .3;

  .back-logo {
    position: absolute;
    width: 70%;
    height: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

}

.back-logo-box:hover {
  opacity: 1;
}

.box-body {
  position: absolute;
  width: 100%;
  z-index: 1;
  top: 50%;
  left: 0;
  padding: 10px;
  box-sizing: border-box;
  transform: translateY(-50%);
}

.box-body-item {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  color: #ffffff;
}

.box-body-item-real-name {
  position: absolute;
  width: 300px;
  right: 40px;
  text-align: right;
  top: 50%;
  transform: translateY(-50%);
}


.nickname {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-right: 10px;
}

.popover {
  cursor: pointer;
}

.logout-btn {
  width: 100%;
  color: #ffffff;
  background-color: rgb(0, 0, 0, 1);
  border-radius: 20px;
}

.logout-btn:hover {
  background-color: rgb(0, 0, 0, .8);
  color: #ffffff;
}

.logout-btn:active {
  background-color: rgb(0, 0, 0, .6);
  color: #ffffff;
}

.change-btn {
  width: 100%;
  border-radius: 20px;
  color: #000;
  border: 1px solid #000;
}

.change-btn:hover {
  opacity: .9;
}

.change-btn:active {
  opacity: .6;
}

.pop-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;

  .pop-title {
    font-size: 12px;
    margin-right: 5px;
  }

  .pop-text {
    font-size: 14px;
  }
}

.close-and-open {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #FFFFFF;
  cursor: pointer;
  // 不可选中
  user-select: none;
}

.close-and-open:hover{
  opacity: .8;
}

.close-and-open:active{
  opacity: .6;
}

.arrow{
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.arrow-right{
  transform: rotateY(180deg) translateY(-50%);
}
</style>